@import 'tailwindcss';
@config "../tailwind.config.ts";

@source "../node_modules/streamdown/dist/index.js";

@custom-variant dark (&:is(.dark *));

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 93%;
    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --primary: 240 5.9% 10%;
    --primary-foreground: 0 0% 98%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --accent: 240 4.8% 97%;
    --accent-foreground: 240 5.9% 10%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 240 5.9% 10%;
    --radius: 1rem;
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }

  .dark {
    --background: 0 0% 9%;
    --foreground: 0 0% 98%;
    --card: 0 0% 12%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 14%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 10%;
    --secondary: 0 0% 16%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 16%;
    --muted-foreground: 0 0% 64%;
    --accent: 0 0% 16%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 20%;
    --input: 0 0% 14%;
    --ring: 0 0% 83.9%;
    --sidebar-background: 0 0% 12%;
    --sidebar-foreground: 0 0% 95%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 0 0% 16%;
    --sidebar-accent-foreground: 0 0% 95%;
    --sidebar-border: 0 0% 20%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
  }
}

.scrollbar-hide {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari, Opera */
}

/* Custom scrollbar styles for visible scrollbars (like Railway) */
.scrollbar-visible {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgb(156, 163, 175) rgb(243, 244, 246);
}

.scrollbar-visible::-webkit-scrollbar {
  height: 8px;
  display: block;
}

.scrollbar-visible::-webkit-scrollbar-track {
  background-color: rgb(243, 244, 246);
  border-radius: 9999px;
}

.scrollbar-visible::-webkit-scrollbar-thumb {
  background-color: rgb(156, 163, 175);
  border-radius: 9999px;
}

.scrollbar-visible::-webkit-scrollbar-thumb:hover {
  background-color: rgb(107, 114, 128);
}

/* Dark mode styles */
.dark .scrollbar-visible {
  scrollbar-color: rgb(75, 85, 99) rgb(31, 41, 55);
}

.dark .scrollbar-visible::-webkit-scrollbar-track {
  background-color: rgb(31, 41, 55);
}

.dark .scrollbar-visible::-webkit-scrollbar-thumb {
  background-color: rgb(75, 85, 99);
}

.dark .scrollbar-visible::-webkit-scrollbar-thumb:hover {
  background-color: rgb(107, 114, 128);
}

.vis-item.timeline-item-success {
  background-color: rgba(34, 197, 94, 0.2);
  border-color: rgb(34, 197, 94);
  color: rgb(22, 101, 52);
}

.vis-item.timeline-item-error {
  background-color: rgba(248, 113, 113, 0.2);
  border-color: rgb(220, 38, 38);
  color: rgb(185, 28, 28);
}

.vis-item.timeline-item-warning {
  background-color: rgba(251, 191, 36, 0.2);
  border-color: rgb(217, 119, 6);
  color: rgb(146, 64, 14);
}

.vis-item.timeline-item-neutral {
  background-color: rgba(148, 163, 184, 0.2);
  border-color: rgb(148, 163, 184);
  color: rgb(30, 41, 59);
}

@utility container {
  margin-inline: auto;
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }

  body {
    @apply bg-background text-foreground;
  }

  /* Restore default list styles that Tailwind's Preflight removes */
  ol {
    list-style-type: decimal;
  }

  ul {
    list-style-type: disc;
  }
}

/* Compact rendering for AI-generated markdown content */
@layer components {
  /* Match test environment: 15px font-size */
  .markdown-content {
    font-size: 15px !important;
    color: #f5f5f5;
  }

  /* Collapse Streamdown wrapper divs to eliminate spacing */
  .markdown-content > div {
    display: contents !important;
  }

  /* Paragraphs: tight line-height within, larger gaps between */
  .markdown-content p {
    line-height: 1.5 !important;
    margin: 0 !important;
    margin-bottom: 12px !important;
  }

  /* Last paragraph should have no bottom margin */
  .markdown-content p:last-child {
    margin-bottom: 0 !important;
  }

  /* Tight spacing between paragraph and following list (like Claude web) */
  .markdown-content p:has(+ ul),
  .markdown-content p:has(+ ol) {
    margin-bottom: 4px !important;
  }

  /* Ordered lists: clean structure with 16px gap after */
  .markdown-content ol {
    list-style-type: decimal !important;
    list-style-position: outside !important;
    padding-left: 24px !important;
    margin: 0 !important;
    margin-bottom: 16px !important;
  }

  /* Numbered list items: 8px spacing between items, 1.5 line-height */
  .markdown-content ol > li {
    margin-bottom: 8px !important;
    line-height: 1.5 !important;
    padding-left: 6px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Paragraph in numbered list item: 4px gap before nested bullets */
  .markdown-content ol > li > p {
    margin: 0 !important;
    margin-bottom: 4px !important;
    line-height: 1.5 !important;
  }

  /* Unordered lists: clean structure */
  .markdown-content ul {
    list-style-type: disc !important;
    list-style-position: outside !important;
    padding-left: 20px !important;
    margin: 0 !important;
    margin-bottom: 8px !important;
  }

  /* Bullet items: 2px spacing, 1.4 line-height */
  .markdown-content ul li {
    margin-bottom: 2px !important;
    line-height: 1.4 !important;
    padding-left: 4px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Tight connection between list item header and nested bullets */
  .markdown-content li > p:has(+ ul),
  .markdown-content li > p:has(+ ol) {
    margin-bottom: 2px !important;
  }

  /* Nested lists: minimal spacing */
  .markdown-content ol ol,
  .markdown-content ol ul,
  .markdown-content ul ol,
  .markdown-content ul ul {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
  }

  /* Strong text styling */
  .markdown-content strong {
    font-weight: 600;
    color: #ffffff;
  }

  /* Headings: consistent spacing and sizing */
  .markdown-content h1 {
    font-size: 1.875rem !important;
    /* 30px */
    font-weight: 700;
    line-height: 1.2 !important;
    margin: 0 !important;
    margin-top: 24px !important;
    margin-bottom: 16px !important;
    color: #ffffff;
  }

  .markdown-content h2 {
    font-size: 1.5rem !important;
    /* 24px */
    font-weight: 700;
    line-height: 1.3 !important;
    margin: 0 !important;
    margin-top: 20px !important;
    margin-bottom: 12px !important;
    color: #ffffff;
  }

  .markdown-content h3 {
    font-size: 1.25rem !important;
    /* 20px */
    font-weight: 600;
    line-height: 1.4 !important;
    margin: 0 !important;
    margin-top: 16px !important;
    margin-bottom: 8px !important;
    color: #ffffff;
  }

  .markdown-content h4 {
    font-size: 1.125rem !important;
    /* 18px */
    font-weight: 600;
    line-height: 1.4 !important;
    margin: 0 !important;
    margin-top: 16px !important;
    margin-bottom: 8px !important;
    color: #ffffff;
  }

  .markdown-content h5,
  .markdown-content h6 {
    font-size: 1rem !important;
    /* 16px */
    font-weight: 600;
    line-height: 1.5 !important;
    margin: 0 !important;
    margin-top: 12px !important;
    margin-bottom: 6px !important;
    color: #ffffff;
  }

  /* First heading should have no top margin */
  .markdown-content h1:first-child,
  .markdown-content h2:first-child,
  .markdown-content h3:first-child,
  .markdown-content h4:first-child,
  .markdown-content h5:first-child,
  .markdown-content h6:first-child {
    margin-top: 0 !important;
  }

  /* Horizontal rules / separators */
  .markdown-content hr {
    margin: 20px 0 !important;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
  }

  /* Blockquotes */
  .markdown-content blockquote {
    margin: 8px 0 !important;
    padding: 4px 16px !important;
    border-left: 3px solid rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.85);
    font-style: italic;
  }

  /* Blockquote paragraphs should be compact */
  .markdown-content blockquote p {
    margin-bottom: 4px !important;
  }

  .markdown-content blockquote p:last-child {
    margin-bottom: 0 !important;
  }

  /* Code blocks */
  .markdown-content pre {
    margin: 12px 0 !important;
    padding: 12px !important;
    border-radius: 6px;
    overflow-x: auto;
    background-color: rgba(0, 0, 0, 0.3) !important;
  }

  .markdown-content code {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.9em;
  }

  /* Inline code */
  .markdown-content p code,
  .markdown-content li code {
    background-color: rgba(255, 255, 255, 0.1);
    padding: 2px 6px;
    border-radius: 3px;
  }
}
